<template lang="html">
	<div class="correlationlist">
		<div class="correlationlist-container" v-for="(item,index) in getclassData" :key="index">
			<div class="content-left">
				<img :src="ListImg">
			</div>
			<div class="content-right">
				<p class="title">{{item.title}}</p>
				<p class="price">{{item.price}}</p>
			</div>
		</div>		
		<div v-show="markFlag" class="mark">等待加载数据...</div>
		<div class="more">
	         <div @click="getMoreHandler" class="Lookmore">查看更多...</div>
	    </div>
	    <!-- 咨询购买 -->
		<div class="buy">
			<img :src="referImg" alt="">
			咨询
			<router-link tag="div" to="" class="btnbuy">
				<p>立即购买</p>
			</router-link >
		</div>
	</div>
</template>
<script>
	export default{
		name:'correlationlist',
		data(){
			return{
				ListImg:require('../assets/img/details1.png'),
				ListImg:require('../assets/img/details2.png'),
				ListImg:require('../assets/img/details3.png'),
				referImg:require("../assets/icon/consult.png"),
				getclassData:[],
				markFlag:true
			}
		},
		mounted(){
           this.getclassInfo()
		},
		methods:{
			getMoreHandler(){
				this.markFlag = true
				this.getclassInfo()
			},
			getclassInfo(){
				this.$axios.get(this.HOST + '/correlation')
				.then(res => {
					this.markFlag = false
                   var allData = this.getclassData.concat(res.data.data)
                   this.getclassData = allData
				})
				.catch(error => {
					console.log(error)
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	.correlationlist{
		.correlationlist-container{
			overflow: hidden;
			padding:10px;
			border-bottom: 1px solid #ddd;
	       .content-left{
	       	  width:40%;
	          float:left;
	       }
	       .content-right{
	       	  width:60%;
	       	  float:right;
	       	  padding:0 10px;
	       	  box-sizing: border-box;
	       	  p{
	       	  	height:25px;
	       	  	line-height: 25px;
	       	  }
	       	  .title{
	       	  	color:#000;
	       	    font-size: 16px;
	       	  }  
	       	  .price{
	       	  	color:#4F8FE2;
	       	  }
	       }
		}
		.more{
		  height: 30px;
		  line-height: 30px;
		  margin-bottom: 120px;
		  .Lookmore{
		  	text-align: center
		  }	  
		}
		.buy{
			width:100%;
			height:50px;
			line-height: 50px;
			position:fixed;
			background-color: #fff;
			bottom: 60px;
			color: #4F8FE2;
			font-size: 18px;
			img{
				width:30px;
				padding-left: 18px;
			}
	        .btnbuy{
	        	float:right;
	        	width:130px;
	        	text-align: center;
	        	background-color:#4F8FE2; 
	        	color:#fff;
	        }
		}
	}
</style>